<style lang="scss" scoped>
  ::v-deep .el-table {

    tr th,
    tr td {
      border-right: none;
    }
  }

  ::v-deep .el-dialog__footer {
    text-align: center;
  }

  ::v-deep .el-tabs__nav-wrap::after {
    background-color: transparent
  }

  .app-container {
    > p {
      opacity: 1;
      margin: 0 0 0 20px;
      /** 文本1 */
      font-size: 18px;
      font-weight: 400;
      color: rgba(17, 38, 60, 1);
      border-left: 3px solid rgba(84, 91, 245, 1);
      padding-left: 10px;
      margin-bottom: 15px;
      margin-left: 0;
    }

    .header {
      min-height: 55px;
      opacity: 1;
      border-radius: 10px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 20px 45px rgba(240, 237, 246, 0.5);
      margin-bottom: 15px;
      padding: 10px 20px;
      padding-bottom: 0;

      > p {

        opacity: 1;
        margin: 0 0 0 20px;
        /** 文本1 */
        font-size: 18px;
        font-weight: 400;
        color: rgba(17, 38, 60, 1);
        border-left: 3px solid rgba(84, 91, 245, 1);
        padding-left: 10px;
        margin-bottom: 15px;
        margin-left: 0;
      }

      .images {
        display: flex;
        justify-content: space-between;
        padding: 0 100px;

        .item {
          text-align: center;

          p {
            margin-top: 5px;
            opacity: 1;
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 24px;
            color: rgba(156, 159, 167, 1);
            text-align: center;
            vertical-align: top;

          }

          h1 {
            font-size: 30px;
            margin: 10px;
          }
        }
      }

      .el-input {
        width: 163px;
        border: 1px solid #7F7FD5;
        border-radius: 8px;
      }

      .el-button {
        height: 32px;
        opacity: 1;
        border-radius: 2px;
        background: linear-gradient(268.09deg, rgba(96, 103, 250, 1) 0%, rgba(119, 153, 252, 1) 100%);
        padding: 8px 18px;
        color: #fff;
        border: none;
        margin-left: 25px;

        &:hover {
          border: none;
          background: linear-gradient(268.09deg, rgb(69, 78, 255) 0%, rgb(88, 130, 255) 100%);

        }

        &:nth-child(1) {
          width: 60px;
          height: 32px;
          opacity: 1;
          border-radius: 2px;
          background: rgba(242, 243, 245, 1);
          color: rgba(0, 0, 0, 0.3);
          padding: 8px 16px 8px 16px;

          &:hover {
            border: none;
            background: rgb(228, 228, 228);

          }
        }


      }

    }


    .content {
      opacity: 1;
      border-radius: 10px;
      background: rgba(255, 255, 255, 1);
      padding: 20px;

      .con_header {
        display: flex;
        justify-content: space-between;

        > p {
          opacity: 1;
          margin: 0 0 0 20px;
          /** 文本1 */
          font-size: 18px;
          font-weight: 400;
          color: rgba(17, 38, 60, 1);
          border-left: 3px solid rgba(84, 91, 245, 1);
          padding-left: 10px;
          margin-bottom: 15px;
          margin-left: 0;
        }

        .el-button {
          height: 32px;
          opacity: 1;
          border-radius: 2px;
          background: linear-gradient(268.09deg, rgba(96, 103, 250, 1) 0%, rgba(119, 153, 252, 1) 100%);
          padding: 8px 18px;
          color: #fff;
          border: none;
          margin-left: 25px;

          &:hover {
            border: none;
            background: linear-gradient(268.09deg, rgb(69, 78, 255) 0%, rgb(88, 130, 255) 100%);

          }


        }
      }


      .el-tabs {
        margin-left: 30px;

        ::v-deep .el-tabs__item {
          color: rgba(188, 195, 212, 1);
          font-size: 14px;
        }

        ::v-deep .is-active {
          color: rgba(94, 129, 244, 1) !important;
          opacity: 1;
          /** 文本1 */
          font-size: 15px;
          font-weight: 700;
          letter-spacing: 0px;
          color: rgba(94, 129, 244, 1);
        }

        ::v-deep .el-tabs__active-bar {
          background-color: rgba(94, 129, 244, 1) !important;
        }
      }

      .description-cell {
        .cell-content {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 1.6em;
          max-height: 3.2em;
        }
      }


      ::v-deep .el-table {
        font-size: 12px;

        .el-tooltip__popper.is-dark {
          white-space: normal;
          max-width: 200px;
          /* 或者其他合适的宽度 */
        }
      }

      ::v-deep .el-table .el-table__header-wrapper th,
      ::v-deep .el-table .el-table__fixed-header-wrapper th {
        height: 41px !important;
        opacity: 1;
        border-radius: 10px 10px, 0px, 0px;
        background: rgba(83, 90, 244, 0.1);

        /** 文本1 */
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 11.72px;
        color: rgba(83, 90, 244, 1);
        vertical-align: top;

      }

      .status {
        display: block;
        padding: 3px 0px;
        opacity: 0.9;
        border-radius: 5px;
        font-size: 11px;
        text-align: center;
        transition: opacity 0.3s ease-in-out;
      }

      .status:hover {
        opacity: 1;
      }

      .status-unsold-recovered {
        color: rgb(159, 100, 223);
        /* 红色 */
        background-color: rgba(244, 235, 253, 1)
        /* 浅红色 */
      }

      .status-unsold-exception {
        color: #FF9800;
        /* 橙色 */
        background-color: #FFF3E0;
        /* 浅橙色 */
      }

      .status-sold-recovered {
        color: rgb(137, 64, 233);
        background-color: rgb(223, 241, 255);
      }

      .status-sold-exception {
        color: #F44336;
        /* 亮红色 */
        background-color: #FFEBEE;
        /* 浅红色 */
      }

      .status-sold-change-binding {
        color: #2196F3;
        /* 蓝色 */
        background-color: #E3F2FD;
        /* 浅蓝色 */
      }


    }

  }

  ::v-deep .el-dialog {
    width: 772px;
    opacity: 1;
    border-radius: 30px;
    background: rgba(255, 255, 255, 1);

    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }

    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    p {
      opacity: 1;
      margin: 0 0 0 20px;
      /** 文本1 */
      font-size: 18px;
      font-weight: 400;
      color: rgba(17, 38, 60, 1);
      border-left: 3px solid rgba(84, 91, 245, 1);
      padding-left: 10px;
      margin-bottom: 15px;
      margin-left: 0;
    }

    .el-input {
      width: 165px;

      .el-input__inner {
        width: 165px;
        border: 1px solid rgba(127, 127, 213, 0.5);
        border-radius: 10px;
      }
    }

    .el-button {
      width: 60px;
      height: 32px;
      opacity: 1;
      border-radius: 2px;
      background: linear-gradient(268.09deg, rgba(96, 103, 250, 1) 0%, rgba(119, 153, 252, 1) 100%);
      padding: 8px 16px 8px 16px;
      color: #fff;
      border: none;
      margin-left: 25px;

      &:hover {
        border: none;
        background: linear-gradient(268.09deg, rgb(69, 78, 255) 0%, rgb(88, 130, 255) 100%);

      }

      &:nth-child(2) {
        width: 60px;
        height: 32px;
        opacity: 1;
        border-radius: 2px;
        background: rgba(242, 243, 245, 1);
        color: rgba(0, 0, 0, 0.3);
        padding: 8px 16px 8px 16px;

        &:hover {
          border: none;
          background: rgb(228, 228, 228);

        }
      }


    }

    .el-input-number {
      width: 165px;

      .el-input {
        width: 165px;

        .el-input__inner {
          width: 165px;
          border: 1px solid rgba(127, 127, 213, 0.5);
          border-radius: 0px;
        }
      }
    }

    .el-dialog__title {
      border-left: 3px solid rgba(84, 91, 245, 1);
      padding-left: 8px;

    }


  }

  ::v-deep .el-table td.el-table__cell {
    border-bottom: none;
  }

  ::v-deep .el-table th.el-table__cell.is-leaf {
    border-bottom: none;
  }

  ::v-deep .el-table::before {
    height: 0;
  }
</style>
<template>
  <div class="app-container">
    <div class="header ">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"
               class="" style="padding-top:8px;">
        <el-form-item label="游戏名称" prop="orderDate">
          <el-input v-model="queryParams.dictLabel"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" @click="resetQuery">重置</el-button>
          <el-button type="primary" size="mini" @click="handleQuery">筛选</el-button>
          <el-button type="primary" plain size="mini" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content">
      <div class="con_header">
        <p>游戏列表</p>
      </div>
      <el-table v-loading="loading" :data="gameList" stripe>
        <el-table-column label="编号" align="center" width="50">
          <template slot-scope="scope">
            {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="游戏名称" align="center" prop="dictLabel"/>
        <el-table-column label="排序" align="center" prop="dictSort"/>
        <el-table-column label="注意事项" align="center" prop="remark"></el-table-column>
        <el-table-column label="" label-width="300"></el-table-column>
        <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleNotation(scope.row)">
              <span style="color: rgba(83, 90, 244, 1);margin-right: 5px">属性配置 </span>
            </el-button>
            <el-button size="mini" type="text" @click="handleUpdate(scope.row)">
              <span style="color: rgba(83, 90, 244, 1);margin-right: 5px">编辑 </span>
            </el-button>
            <el-button size="mini" type="text" @click="handleDelete(scope.row)">
              <span style="color:#FF0000;margin-right: 5px">删除 </span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                  @pagination="getList"/>
    </div>

    <el-dialog :title="title" :visible.sync="open" width="400px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="游戏名称" prop="dictLabel">
          <el-input v-model="form.dictLabel" placeholder="请输入游戏名称"/>
        </el-form-item>

        <el-form-item label="排序" prop="dictSort">
          <template>
            <el-input-number v-model="form.dictSort" :min="1" :max="10" label="描述文字"></el-input-number>
          </template>
        </el-form-item>
        <el-form-item label="注意事项" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入注意事项"/>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
    import {addData, updateData, delData } from '@/api/system/dict/data'
    export default {
        name: "Management",
        data() {
            return {
                title: '',
                //状态数据
                TodayCount: '',
                status: {},
                //游戏列表
                gameList: [],
                // 遮罩层
                loading: false,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 弹出层标题
                title: "",
                // 是否显示新增弹出层
                open: false,
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 100,
                    dictLabel: ''
                },
                // 表单参数
                form: {
                    dictType: 'game_category',
                    dictValue: '123'
                },


                // 表单校验
                rules: {},

            };
        },
        created() {
            this.getList();
        },
        methods: {
            handleAvatarSuccess(response, file) {
                // 假设服务器响应的数据中包含了文件路径 'url'
                this.form.images = response.url; // 更新 form.image 为服务器返回的 URL
            },
            beforeAvatarUpload(file) {
                const isJPEG = file.type === 'image/jpeg'
                const isPNG = file.type === 'image/png'
                const jsJPG = file.type === 'image/jpg'
                // const isLt2M = file.size / 1024 / 1024 < 10
                if (!isJPEG && !isPNG && !jsJPG) {
                    this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
                    return false
                }
                return true;
            },

            //切换Tab
            handleGame(tab, event) {
                this.queryParams.problemType = tab.name
                this.getList()
            },
            //切换Tab
            handleName(tab, event) {
                this.getList()
            },
            /** 查询列表 */
            getList() {
                this.getDicts('game_category').then(res => {
                    this.gameList = res.data
                })
                this.loading = false

            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.open = true;
                this.title = "编辑游戏";
                this.form = {...row}
            },

            cancel() {
                this.open = false;
                this.reset();
            },
            //新增 表单重置
            reset() {
                this.resetForm("form");
            },

            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.open = true;
                this.title = "新增游戏";
            },
            /** 新增 确认提交 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.dictCode != null) {
                            updateData(this.form).then(response => {
                                this.$modal.msgSuccess("编辑成功");
                                this.open = false;
                                this.getList();
                            });
                        } else {
                            addData(this.form).then(response => {
                                this.$modal.msgSuccess("新增成功");
                                this.open = false;
                                this.getList();
                            });
                        }
                    }
                });
            },
            /** 跳转游戏配置 */
            handleNotation(row) {
                this.$router.push({path: 'dictionaryOfGames', query: {dictCode: row.dictCode}})
            },
            //转问题 取消按钮
            cancelProblem() {
                this.openProblem = false;
                this.resetProblem();
            },
            //转问题 表单重置
            resetProblem() {
                this.formProblem = {};
                this.resetForm("formProblem");
            },

            /** 删除操作 */
            handleDelete(row) {
                console.log(row);
                this.resetQuery();
                delData(row.dictCode).then(response => {
                    this.$modal.msgSuccess("删除成功");
                    this.getList();
                })
            },

            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.$refs.queryForm.resetFields();
                this.handleQuery();
            },

            /** 导出按钮操作 */
            handleExport() {
                this.download('business/stock/export', {
                    ...this.queryParams
                }, `management_${new Date().getTime()}.xlsx`)
            }
        }
    };
</script>
